<template>
  <div class="home_card">
    <div class="rowTitle">
      <!-- <span>会员转化</span> -->
      <span>{{ $t("Home.index9") }}</span>
      <date-range-picker
        @change="getData"
        v-model="query_time"
        class="date-item"
      />
    </div>
    <div class="cardContent">
      <ul class="ratioColor">
        <li @click="toRoute(checkPermission(['openCheck@index']))">
          <!-- <span class="labelText">累计开户人数</span> -->
          <span class="labelText">{{ $t("Home.index10") }}</span>
          <span class="conColor">
            <a class="red"></a>
            <!-- (
                    (Number(data.open_accounts) /
                      Number(data.open_accounts)) *
                    100
                  ).toFixed(2) + '%', -->
            <span
              class="red"
              :style="{
                width: data.open_accounts == 0 ? '0' : '100%',
              }"
            ></span
          ></span>
          <span class="numText"
            ><h2 class="DINfont">{{ data.open_accounts }}</h2>
            {{ $t("Home.index14") }}</span
          >
        </li>
        <li @click="toRoute(checkPermission(['openCheck@index']), '1')">
          <span class="labelText">{{ $t("Home.index11") }}</span>
          <span class="conColor">
            <a class="blue"></a>
            <span
              class="blue"
              :style="{
                width:
                  data.open_accounts == 0
                    ? '0'
                    : (
                        (Number(data.open_accounts_mainland) /
                          Number(data.open_accounts)) *
                        100
                      ).toFixed(2) + '%',
              }"
            ></span
          ></span>
          <span class="numText"
            ><h2 class="DINfont">{{ data.open_accounts_mainland }}</h2>
            {{ $t("Home.index14") }}</span
          >
        </li>
        <li @click="toRoute(checkPermission(['openCheck@index']), '2')">
          <span class="labelText">{{ $t("Home.index12") }}</span>
          <span class="conColor">
            <a class="yellow"></a>
            <span
              class="yellow"
              :style="{
                width:
                  data.open_accounts == 0
                    ? '0'
                    : (
                        (Number(data.open_accounts_hongkong) /
                          Number(data.open_accounts)) *
                        100
                      ).toFixed(2) + '%',
              }"
            ></span
          ></span>
          <span class="numText"
            ><h2 class="DINfont">{{ data.open_accounts_hongkong }}</h2>
            {{ $t("Home.index14") }}</span
          >
        </li>
        <li @click="toRoute(checkPermission(['openCheck@index']), '3')">
          <span class="labelText">{{ $t("Home.index13") }}</span>
          <span class="conColor">
            <a class="green"></a>
            <span
              class="green"
              :style="{
                width:
                  data.open_accounts == 0
                    ? '0'
                    : (
                        (Number(data.open_accounts_overseas) /
                          Number(data.open_accounts)) *
                        100
                      ).toFixed(2) + '%',
              }"
            ></span
          ></span>
          <span class="numText"
            ><h2 class="DINfont">{{ data.open_accounts_overseas }}</h2>
            {{ $t("Home.index14") }}</span
          >
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import DateRangePicker from "@/components/DateRangePicker/index_shouye";
import { getCusCount } from "@/api/home";
export default {
  components: {
    DateRangePicker,
  },
  mounted() {
    this.getData();
  },
  data() {
    return {
      query_time: [],
      data: {},
    };
  },
  methods: {
    toRoute(disabled, user_type) {
      if (!disabled) {
        return false;
      }
      this.$router.push({
        // name: "开户审核",
        path: "/openList/openCheck",
        query: {
          //open_status: "2",
          user_type: user_type ? user_type : undefined,
        },
      });
    },
    getData() {
      getCusCount({
        start_time:
          this.query_time && this.query_time[0]
            ? parseInt(this.query_time[0] / 1000)
            : "",
        end_time:
          this.query_time && this.query_time[1]
            ? parseInt(this.query_time[1] / 1000)
            : "",
      })
        .then((res) => {
          if (res.code == 10000) {
            this.data = res.data;
          } else {
            this.$message.error(res.message);
          }
        })
        .catch((error) => {
          this.$message.error(error.Error);
        });
    },
  },
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.cardContent {
  width: 100%;
  margin-top: 15px;
  .ratioColor {
    > li {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 14px;
      margin: 31px 0;
      .conColor {
        display: inline-block;
        flex: 1;
        height: 8px;
        line-height: 8px;
        border-radius: 20px;
        position: relative;
        overflow: hidden;
        > a {
          display: inline-block;
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          height: 100%;
          opacity: 0.3;
        }
        > span {
          display: inline-block;
          height: 100%;
          border-radius: 20px;
          position: absolute;
          top: 0;
          left: 0;
          z-index: 10;
        }
      }
      .numText {
        width: 10%;
        min-width: 50px;
        text-align: right;
        h2 {
          display: inline-block;
        }
      }
      .labelText {
        width: 18%;
        min-width: 95px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
  }
}
</style>
